/*
Theme Name: The HTML5 Boilerplate
Theme URI: http://github.com/zencoder/html5-boilerplate-for-wordpress
Description: Based on the <a href="http://html5boilerplate.com">HTML5 Boilerplate</a> and Bruce Lawson's <a href="http://html5doctor.com/designing-a-blog-with-html5/">Designing a Blog with HTML5</a>. The sole purpose of this theme is to save developers the time it takes to apply the HTML5 Boilerplate to WordPress. See the README for instructions. The "HTML5 Boilerplate" name is used with permission from Paul Irish.
Version: 1.0
Author: Steve Heffernan
Author URI: http://steveheffernan.com/
Tags: white, two-columns
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
HTML Boilerplate styles can be found in the html5-boilerplate/css directory.
*/

/* WordPress Required Styles */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

.sticky {
	background: #f7f7f7;
	padding: 0 10px 10px;
}
	
.sticky h2 {
	padding-top: 10px;
}

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, button {
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}

fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
a{
	/*color:#939598;*/
	color: #949599;
	text-decoration:none;
}
a:hover{
	/*font-weight: bold;*/
	color: #3a393e;
}

/* fancy style */
body{
    background-color: #f3f3f3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #3a3a3c;
    line-height: 1.4em;
}
.wrapper{
	width: 900px;
	position:relative;
	margin: 1% auto;
	padding: 0 3%;
	-webkit-transition: width .5s;
	-moz-transition: width .5s;
	-o-transition: width .5s;
	-ms-transition: width .5s;
	transition: width .5s;
}
.wrapper .header{
	float:left;
	width: 100%;
}
.wrapper .header .logo {
	float:left;
	margin-bottom: 1.3%;
}
.wrapper .header .logo img{
	width: 100%;
	height: auto;
}
.social-counter {
    position: absolute;
    right: 0;
}
.social-counter a{
    margin-right: 10px;
}
.social-counter ul li {
	float:left;
}
.social-counter ul li span {
	line-height: 10px;
	vertical-align:text-top;
}
.social-counter ul li .counter {
	font-size: 14px;
	margin-left: 3px;
}
#s{
}
span#s-icon {
}
#s input{
	width: 131px;
	height: 18px;
	background: url(images/search.png) no-repeat center center;
	border: none;
}
/* -------------------------------- MENU -----------------------------------------*/
.more-products .menu{
}
.header .menu {
	width: 100%;
	float:left;
	margin-top: 10px;
	text-transform: uppercase;
	border-top: 1px solid #c8c8ca;
	padding: 20px 0;
	position: relative;
	border-bottom: 1px solid #c8c8ca;
}
.menu a
{
	text-decoration:none;
}
.menu > ul{
	float: left;
}
.menu ul li {
	float:left;
}
.current_page_item  a{
    color: #414042;
	font-weight: bold;
}
.menu .right-menu ul li:last-child {

}
.menu ul li span {
}
.menu ul li span a{
	padding-right: 20px;
}
.menu .count {
	float:right;
	font-size:14px;
	height:20px;
	line-height:20px;
	margin:-32px 0 0 10px;
	padding-left:0 8px 0 5px;
}
.wrapper .menu ul #menu-selected {
}
.wrapper .menu ul #menu-hover {
}
/* -------------------------------- END MENU -----------------------------------------*/
.wrapper .wrapper-content {
	float:left;
	width: 100%;
	margin-top: 20px;
}
/* -------------------------------- SIDEBAR -----------------------------------------*/
.side-bar-wrapper
{
	width: 24%;
	float: left;
	overflow: hidden;
	margin: 0 0 20px 0;
}
.fix{
	position: fixed;
}
.side-bar {
    padding:0 20px 20px 0;
    overflow: hidden;
}

.side-bar ul.inline{
    font-size: 12px;
}


.side-bar ul.inline li{
	display: inline-block;
}

#view-portfolio a {
	background: #3A3A3C;
	color: #E9E9EB;
	width: 100%;
	padding: 10px 0;
	display: block;
}
.side-bar .side-bar-content .item {
	position: relative;
	margin-bottom: 10px;
}

.blog-item-shadow{
	background: url(images/blog_item_shadow.jpg) no-repeat;
	position: absolute;
	bottom: -9px;
	width: 100%; 
	height: 9px;
	left: 0;
	background-size: 100%;
}
.side-bar .side-bar-content .item .item-title {
	padding-bottom: 5px;
	border-bottom: 1px solid #c8c8ca;
	margin-bottom: 10px;
}
.side-bar span.title {
	font-size: 1.2em;
	text-transform: uppercase;
}
.side-bar .side-bar-content .item img {
	width: 100%;
	height: auto;
}
.side-bar .side-bar-content .item ul {
}
.side-bar .side-bar-content .item a {
	text-decoration:none;
}
.item-name {
	font-size:12px;
	line-height: 30px;
	text-align:center;
}
.side-bar .side-bar-content .item ul li a {
    display: block;
    width: 100%;
}
/* -------------------------------- END SIDEBAR-----------------------------------------*/
/* -------------------------------- MAIN CONTENT -----------------------------------------*/
.main-content {
	float: right;
	padding: 0 0 0% 3%;
	margin-bottom: 3%;
	width: 72.7%;
	border-left: 1px solid #C8C7CC;
}
.post {
	float: left;
	border-bottom: 1px solid #c8c8ca;
	padding: 3% 0;
	width: 100%;
}
.share .reading {
	display: block;
	width: 100%;
	text-align: right;
	font-style: italic;
}
.post:last-child{
	border-bottom: none;
}

.post .post-thumbs{
    float: left;
	
    display: block;
    width: 33%;
    line-height: 100%;
}
.post .post-content {
    float: left;
    width: 100%;
}
.post .post-content .excerpt {
	float: left;
	width: 64%;
	margin-left: 3%;
	min-height: 170px;
	position: relative;
}

.post .post-title a{
	font-size: 1.286em;
    color: #414042;
    
    font-weight: bold;
}

.post-content .item-thumbs{
    float: left;
    position: relative;	
    display: block;
    width: 100%;
}
.blog-image-shadow{
	background: url(images/blog_image_shadow.jpg) no-repeat;
	width: 100%; height: 12px;
	position: absolute;
	left: 0;  
	bottom: -12px;
}
.is-page .post-content .content
{
    width: 100%;
    margin: 0;
}

.content p img{
    width: 100% !important;
    margin: 0 !important;
}
/*trong trang single*/
.is-single {
	margin: 0;
	padding: 0;
}
.is-single .post-content .content {
	margin-left: 0px;
	width: 100%;
	padding-bottom: 15px;
}
/*end trong trang single*/
.post-content .content .the-content{
	/*padding-top:20px;*/
}

.post-content .content .the-content h1{
	font-size:35px;
}
.post-content .content .the-content h2{
	font-size:30px;
}
.post-content .content .the-content h3{
	font-size:25px;
}
.post-content .content .the-content h4{
	font-size:20px;
}
.post-content .content .the-content h5{
	font-size:15px;
}
.post-content .content .the-content h6{
	font-size:10px;
}

.content .top{
	border-bottom: 1px solid #c8c8ca;
	padding-bottom: 10px;
	line-height: 30px;
	margin-bottom: 20px;
}

.blog_image{
	position: relative;
}
.blog_image .blog_single_shadow{
	background: url(images/blog_single_shadow.jpg) no-repeat;
	width: 100%;
	height: 16px;
	position: absolute;
	bottom: -6px; left: 0;
}
.blog_image img{
	width: 100%;
	margin: 0!important;
	height: 280px;
}
.post-content .content .the-content p{
	padding: 10px 0;
}
.post .post-content span img {
	width: 100%; 
	height: auto;
	max-height: 170px;
}
.content-title{
	color: #3A3A3C;
	font-size: 1.7em;
}
.post .post-content .content .post-info,
.post .post-content .content .post-info a {
	font-size: 12px;
}
.content-title {
	text-transform: uppercase;
	font-weight: bold;
	padding-bottom: 3%;
	border-bottom: 1px solid #c8c8ca;
}
.post .post-content .content .top h3 {
	font-size: 22px;
}

.post .post-content .content
.post .post-content .excerpt .reading{
	font-style: italic;
	position: relative;
	display: block;
	text-align: right;
}

.share{
	position: absolute;
	bottom: -14px;
	width: 100%;
}

.share span{
	border-top: 1px solid #c8c8ca;	
	line-height: 38px;
	display: block;
}

.share span a{
    color: #3a3a3c;
}

.paging{
	float:right;
	margin-top: 20px;
}

.paging li{
	display: inline-block;
	height: 30px;
}
.paging li a{

}

.paging .page-next a{
	
}
/* -------------------------------- END MAIN CONTENT -----------------------------------------*/
/* -------------------------------- COMMENT -----------------------------------------*/
.comment-template{
	margin-top: 20px;
	float: left;
	width: 100%;
}
.comment-author-vcard{
	float:left;
	margin-right: 3%;
	position: relative;
}
.comment-author-vcard img{
    width: 100%;
}
.avatar-shadow{
	width: 100px;
	height: 5px;
	position:absolute;
	background: url(images/comment_avatar_shadow.jpg) no-repeat;
	bottom: -5px;
	left: 0;
}
.comment.even{
	border-bottom: 1px solid #c8c8ca;
	margin-bottom: 20px;
}
.comment-author{
    padding-bottom: 5px;
	
}
.comment-text{

}
.commentBody{
	float:left;
	position: relative;
	width: 79%;
	min-height: 100px;
}
.depth-2{
	margin-left:50px;
	padding-bottom: 0!important;
}
.depth-2 .commentBody{
    width: 72%;
}

#comments .children{
	float:left;
	margin-top: 3%;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.comment-content{
    float: left;
    width: 100%;
}
.comment-content a{
}
.comment-template #comments-title {
	margin-bottom: 20px;
	font-size: 18px;
	padding: 15px 0;
	font-weight: bold;
	border-top: 1px solid #c8c8ca;
	border-bottom: 1px solid #c8c8ca;
}
.comment-template #comments-title em{
}
.comment{
	padding-bottom: 3%;
	float:left;
	position: relative;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.cancel-comment-reply{
	margin-bottom:4px;
}
#respond{
	float:left;
	width: 100%;
	margin-top: 20px;
}
#respond h3,
#contact-respond h3,
#contact-title h3 {
	font-size: 1.15em;
	padding-bottom: 1%;
}
#respond h3 a ,
#contact-respond h3 a {
	text-decoration:none;
	font-size:14px;
}
#respond h3#star,
#contact-title h3#star{
	font-size:12px;
}
.reply{
    position: absolute;
    right: 0;
    bottom: 0;
}
.reply a{
	font-style: italic;
}
p.logged{
	padding:10px 0px;
}
.waiting-approve{
	float:left;
	margin-top: 10px;
}

input[type="text"],
textarea,
input[type="submit"]
{
	border: 1px solid #414042;
	background: transparent;
	outline: none;
}
input[type="text"], textarea{
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 10px;
}
#comments .left-comment ,
#contact-respond .left-comment{
	float:left;
	width: 40%;
}
#contact-respond .left-comment{
	width: 100%;
}
#comments .left-comment p,
#contact-respond .left-comment p{
	margin-top: 10px;
	width: 100%;
}

input[type="text"]{
	height: 100%;
	outline: none;
	padding: 2% 3%;
	width: 100%;
}
input[type="submit"],
button[type="submit"]{
	padding: 1.5% 3%;
	float:right;
	cursor:pointer;
	font-style:italic;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
#comments .left-comment p.submit-comment,
#contact-respond .left-comment p.submit-comment{
}
#comments p.submit-comment input[type="submit"]:active,
#contact-respond p.submit-comment button[type="submit"]:active {
}
p#admin-submit input[type="submit"]{
	height:35px;
	margin-right:50px;
	margin-top:11px;
	font-style:italic;
}
p#admin-submit input[type="submit"]:active{
}
p#textarea {
	float: left;
	margin: 10px 0 0 18px;
	width: 57%;
}
textarea {
	float: left;
	width: 100%;
	padding: 3%;
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
/* -------------------------------- END COMMENT -----------------------------------------*/
/* -------------------------------- FOOTER -----------------------------------------*/
.footer-wapper {
	padding-top: 20px;
	float:left;
	width: 100%;
	border-top: 1px solid #c8c8ca;
}
.footer-wapper .footer-title{
	height: 30px;
	width: 100%;
}
.footer-wapper .footer-title ul li {
	float:left;
	width: 33.33%;
	font-size:14px;
	text-transform: uppercase;
	font-weight: bold;
}
.footer-wapper .footer-content{
	width: 100%;
	float:left;
}
.footer-wapper .footer-content > ul > li {
	float:left;
	overflow:hidden;
	width: 33.33%;
	padding: 0 30px 0 0;
	min-height: 1px;
	text-align:justify;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;	
}

.footer-wapper .contact{
    padding: 0!important;
}
.footer-content ul.info-ct{
	float: left;
	margin-top: 0px;
	margin-left: 0px;
}
.footer-content ul.info-ct li{
	margin-bottom: 3%;
}
.footer-content ul.info-ct a{
}
.footer-content li.blog ul li{
	padding-bottom:10px;
	text-align:left;
}
.map{
	height:160px;
	width:240px;
}
.footer-wapper .footer{
	position:relative;
}
.footer-wapper .footer{
	width: 100%;
	float:left;
	line-height: 2em;
	border-top: 1px solid #c8c8ca;
}
.footer-wapper .footer .info-footer{
	float:left;
}
.footer-wapper .footer #back-to-top{
	float:right;
}
.footer-wapper .footer .info-footer ul{
	float:left;
}
.footer-wapper .footer .info-footer li{
	float:left;
}
.footer-wapper .footer .info-footer p{
	float:left;
}
.footer-wapper .footer .info-footer p span{
}
.footer-wapper .footer .info-footer p a{
}
#menu-footer li.current_page_item{
}
#menu-footer li a{
}
.footer-wapper .footer p#back-to-top {
	cursor:pointer;
	float:right;
}
.footer-wapper .footer .social-counter {
	float:right;
	position: relative;
}
/* -------------------------------- END FOOTER -----------------------------------------*/
.rightbar {
	float:left;
	height:450px;
	margin-bottom: 30px;
	z-index:9999;
	margin-top: -1px;
}
.slider-wrapper{position: relative!important;}
.slider-wrapper .home-slider-shadow{
	background: url(images/home_slider_shadow.jpg) no-repeat;
	width: 100%;
	height: 18px;
	position: absolute;
	left: 0;
	bottom: -18px;
}
.more-products ul{
}
.more-products ul li:first-child{
}
.more-products .title{
	height:50px;
	margin-left: auto;
	margin-right: auto;
}
.more-products .menu{
	width:900px;
	margin:0px;
}

.more-products-content .next, .more-products-content .prev{
	position:absolute;
	width:20px;
	height:20px;
	margin-top:31px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity:0.7;
}
.more-products-content .next:hover, .more-products-content .prev:hover{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity:1;
	margin-top:30px;
}
.more-products-content .prev{
	margin-left:30px;
}
.more-products-content .next{
	margin-left: 850px;
}
#home-slider{
	margin:10px 70px 20px 70px;
}
.more-products-content img{
}
.more-products-content li{
}

/*********************************************************** GALLERY ***********************************************************/
/**** gallery-menu ****/
.wrapper-gallery {
	float: left;
	width: 100%;
	overflow: hidden;
}

.wrapper-gallery a{
	color: #414042;
	display: block;
	width: 100%;
	position: relative;
}

.wrapper-gallery .menu-gallery {
	width: 100%;
	float: left;
}
.wrapper-gallery .menu-gallery li {
	display: inline-block;
	height: 64px;
}
.wrapper-gallery .menu-gallery li a{
	padding: 20px 20px 20px 0px;
	display: block;	
}

.wrapper-gallery .menu-gallery li:hover{
}
.wrapper-gallery .menu-gallery li.gallery-current a{
	color: #414042;
	font-weight: bold;
}
/**** end gallery-menu ****/
/**** gallery-item ****/
.product-content-title{
	text-transform: uppercase;
	padding: 20px 0;
	border-bottom: 1px solid #c8c8ca;
	font-weight: bold;
	font-size: 24px;
}
.wrapper-gallery ul.gallery-item {
	float: left;
	width: 110%;
	overflow: hidden;
}
.wrapper-gallery ul.gallery-item li {
    float: left;
	width: 20%;
	margin: 0 3.56% 0 0;
	-webkit-transition: width .2s;
	-moz-transition: width .2s;
	-o-transition: width .2s;
	-ms-transition: width .2s;
	transition: width .2s;
}

.gallery-item .gallery-item-shadow{
	background: url(images/gallery_item_shadow.jpg) no-repeat;
	position: absolute;
	width: 100%;
	height: 12px;
	bottom: 38px;
	left: 0;
	background-size: 100%;
}
.wrapper-gallery .gallery-item li a img {
    width: 100%;
    height: 100%;
}
.wrapper-gallery .gallery-item li a p {
	text-align:center;
	white-space: nowrap;
	overflow: hidden;
	padding: 15px 0;
	text-transform: capitalize;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
}
/**** end gallery-item ****/
/*********************************************************** end GALLERY ***********************************************************/
/*********************************************************** MORE PRODUCTS ***********************************************************/
.more-products .more-products-title{
	font-style:italic;
	padding: 10px 0;
}
.main-content .more-products {
	float: left;
	width: 100%;
}

/*********** NAV *************/
.main-content .more-products .more-products-content{
	border: 1px solid #414141;
	border-radius: 5px;
}
.more-products-nav-prev{
	position:absolute;
	width:17px;
	height:22px;
	top:45px;
	left:12px;
}
.more-products-nav-next{
	position:absolute;
	width:17px;
	height:22px;
	top:45px;
	right:12px;
}
/*********** end NAV *************/
/*********** ITEM *************/
.main-content .more-products ul {
}
.main-content .more-products ul li {
    margin: 10px 10px 5px 10px;
    position: relative;
}

.main-content .more-products ul li img {
    width: 150px;
    height: 105px;
}

.more-products .more-product-shadow{
	background: url(images/more_product_shadow.jpg) no-repeat;
	width: 100%; height: 8px;
	position: absolute;
	bottom: 15px;
}
.main-content .more-products ul li p {
	font-size: 0.8em;
	text-align:center;
	padding-top: 2%;
	text-transform: capitalize;
	color: #414141;
	z-index: 999;
	position: relative;
}
/*********** end ITEM *************/
/*********************************************************** end MORE PRODUCTS ***********************************************************/
/*********************************************************** CONTACT FORM ***********************************************************/
#contact-respond{
	width: 50%;
	float: left;
	margin-right: 3%;
	border-right: 1px dashed #c8c8ca;
	padding-right: 3%;
}
#contact-respond p#textarea{
	margin:10px 0 0 0;
}
#contact-respond textarea{
	height: 100px;
}

#contact-respond .left-comment p {
	float:left;
}
#contact-respond input[type="text"]{
}
#contact-respond h3{
	font-size:15px;
}
.post-content .contact-info{
	margin-bottom: 20px!important;
}
.is-page{
    padding: 0;
}
#contact-title{
}
#contact-title h3 {
	font-size: 1.15em;
}
#result{
	float: left;
	width: 40%;
	font-style: italic;
}
ul.info-ct{
	margin: 3% 0 0 0;
	list-style:none;
	width: 100%;
	float: left;
}
ul.info-ct p{
    color: #414042;
}
ul.info-ct li{
	padding-left: 40px;
}
ul.info-ct li.name{
	background: url(images/name-icon.png) left center no-repeat;
	
}
ul.info-ct li.email{
	background: url(images/email-icon.png) left center no-repeat;
}
ul.info-ct li.mobile{
	background: url(images/mobile-icon.png) left center  no-repeat;
}
ul.info-ct li.facebook{
	background: url(images/icon-facebook.png) no-repeat;
}
/*********************************************************** end CONTACT FORM ***********************************************************/

/*************************************Fancy Search****************************/
#fancy_search{
    width: 600px;
    min-height: 600px;
}

#fancy_search .close{

}

#fancy_search form{
	float: left;
	width: 560px;
	padding: 20px;
	line-height: 50px;
	position: relative;
	z-index: 999;
	border-bottom: 1px solid #414042;
}

#fancy_search form input[type="text"]{
    float: left;
    width: 200px;
    border-radius: 0;
    margin-right: 10px;
    font-style: normal;
    font-size: 14px;
}

#fancy_search form input[type="submit"]{
	float: left;
	height: 30px;
	padding: 0 25px;
	width: auto;
}

#fancy_search .fancy-search-result{
    height: 500px;
    /*background: red;*/
    float: left;
    width: 100%;
    overflow: auto;
    padding-left: 20px;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
 
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

@media only screen and (min-width: 600px) {
    .side-bar-wrapper{
		display: none;
	}

	.main-content{
		width: 100%;
		border-left: none;
	}

	.wrapper{
        width: 600px;
    }

    .wrapper-gallery ul.gallery-item li {
		float: left;
    	
		width: 26.6%;
    	
		margin: 0 5.56% 0 0;
    	-webkit-transition: width .2s;
    	-moz-transition: width .2s;
    	-o-transition: width .2s;
    	-ms-transition: width .2s;
    	transition: width .2s;
	}
}

@media only screen and (min-width: 800px) {
    /* Style adjustments for viewports that meet the condition */
    .wrapper{
        width: 800px;
    }

    .side-bar-wrapper{
		display: block;
	}

	.main-content{
		width: 72.7%;
		border-left: 1px solid #C8C7CC;

	}

	.wrapper-gallery ul.gallery-item li {
		float: left;
    	width: 20%;
    	margin: 0 3.56% 0 0;
    	-webkit-transition: width .2s;
    	-moz-transition: width .2s;
    	-o-transition: width .2s;
    	-ms-transition: width .2s;
    	transition: width .2s;
	}
}

@media only screen and (min-width: 1000px) {
    /* Style adjustments for viewports that meet the condition */
    .wrapper{
        width: 900px;
    }

    .side-bar-wrapper{
		display: block;
	}

	.main-content{
		border-left: 1px solid #C8C7CC;
		width: 72.7%;
	}
	.wrapper-gallery ul.gallery-item li {
		float: left;
    	width: 20%;
    	margin: 0 3.56% 0 0;
    	-webkit-transition: width .2s;
    	-moz-transition: width .2s;
    	-o-transition: width .2s;
    	-ms-transition: width .2s;
    	transition: width .2s;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
